
<template id="input-widget">
  <div v-if="node.input_type">

    <div v-if="node.input_type == 21 && node.input_widget">
      <!-- {#自定义输入组件#} -->
      <f7-list v-if="(node.input_widget.widget_type == 2 || node.value=='select')&& (node.input_widget.action_type == 1 || node.input_widget.action_type == 4) && node.input_widget.items" :name="node.id" v-model="node.default" @change="input_complete(parent_node, node, $event)">
        <f7-list-item>
          <f7-input type="select">
            <option value="" disabled="" selected="">请选择</option>
            <option v-for="(item,index) in node.input_widget.items" :value="item.id" :key="'key-'+index">{{ item.title }}
            </option>
          </f7-input>
        </f7-list-item>
      </f7-list>

      <f7-list v-else-if="node.input_widget.widget_type == 1 && (node.input_widget.action_type == 1 || node.input_widget.action_type == 4) && node.input_widget.items" v-model="node.default">
        <f7-list-item>
          <f7-input type="select">
            <option value="" disabled="" selected="">请选择</option>
            <option v-for="(item,index) in node.input_widget.items" :value="item.id" :name="node.id" :key="'key-'+index">{{ item.title }}</option>
          </f7-input>
        </f7-list-item>
      </f7-list>

      <label class="checkbox-inline" v-for="(item,index) in node.input_widget.items" v-else-if="node.input_widget.action_type == 2" :key="'key-'+index">
        <input type="checkbox" :value="item.id" :name="node.id" v-model="node.default" /> {{ item.title }}
      </label>

    </div>

    <div v-else-if="node.input_type == 23 && node.input_items">

      <!-- {#动态输入组件#} -->
      <template v-if="node.is_required">
        <f7-list style="margin-bottom:10px" v-for="(fields,index) in node.items" :key="'key-'+index">
          <f7-list-item v-for="(item,idx) in fields" :key="'key-'+idx">
            <f7-label style="font-size:14px">{{item.title}}</f7-label>
            <!-- <input-widget input_style="1" v-on:add_item="add_item" :node="child" :parent_node="node" v-on:update="input_complete" v-on:on_keyup="on_keyup" /> -->
            <input-widget input_style="1" v-on:add_item="add_item" :node="item" :parent_node="node" />
          </f7-list-item>
        </f7-list>
      </template>
      <table class="table table-hover" style="margin-bottom: 0px;" v-if="!node.is_required">
        <tbody>
          <tr class="test_confirm_title_background">
            <th v-for="(field,index) in node.input_items" :key="'key-'+index">{{field.title }}</th>
          </tr>
          <tr v-for="(fields,index) in node.items" :key="'key-'+index">
            <td v-for="(item,idx) in fields" :key="'key-'+idx">
              <input-widget :node="item" :parent_node="node" /></td>
          </tr>
        </tbody>
      </table>

      <f7-block style="margin-top:0">
        <!-- <f7-button @click.prevent="add_item(node, $event)">增加一行</f7-button> -->
        <f7-link @click.prevent="add_item(node, $event)" style="color:#2196f3">增加一行</f7-link>
      </f7-block>

    </div>

    <div v-else-if="node.input_type == 25">
      <user-widget :node="node" v-on:update_value="update_value(parent_node, node, $event)" />
    </div>

    <div v-else-if="node.input_type == 3">
      <input type="date" name="date" v-model="node.default" class="form-control" />
    </div>

    <div v-else-if="node.input_type == 27">
      <input type="datetime" name="datetime" v-model="node.default" />
    </div>

    <div v-else-if="node.input_type == 17">
      <input type="time" name="time" v-model="node.default" />
    </div>

    <div v-else-if="node.input_type == 7" class="list-block">
      <!-- 多行文本 -->
      <f7-list>
        <f7-list-item>
          <f7-input type="textarea" :placeholder="node.input_title" :name="node.id" v-model="node.default" @blur="input_complete(parent_node, node, $event)"></f7-input>
        </f7-list-item>
      </f7-list>
    </div>

    <div v-else-if="node.input_type == 39">
      <!-- 民族选择 -->
      <select v-model="node.default">
        <option value="" disabled="" selected="">请选择</option>
        <option v-for="(li,index) in nations" :value="li" :key="'key-'+index">{{ li }}</option>
      </select>
    </div>

    <div v-else-if="node.input_type == 29">
      <!-- 定制js选择 -->
      <p>无</p>
    </div>
    <div v-else>

      <!-- 多填引入单个input -->
      <f7-input v-if="input_style==1" type="text" :placeholder="node.input_title || node.action_tips" :name="node.id" v-model="node.default" @keyup="on_keyup(parent_node, node, $event)" @blur="input_complete(parent_node, node, $event)" />

      <!-- radio 选中引入单个input -->
      <!-- <f7-input v-if="input_style==1" type="text" :placeholder="node.input_title || node.action_tips" :name="node.id" v-model="node.default" @keyup="on_keyup(parent_node, node, $event)" @blur="input_complete(parent_node, node, $event)" /> -->

      <f7-list-item v-else-if="input_style==2" class="radio-input-show">
        <f7-label>{{node.input_title || node.action_tips}}</f7-label>
        <f7-input type="text" :name="node.id" v-model="node.default" @keyup="on_keyup(parent_node, node, $event)" @blur="input_complete(parent_node, node, $event)" />
      </f7-list-item>

      <!-- 单填文本 -->
      <f7-list v-else>
        <f7-list-item>
          <f7-input type="text" :placeholder="node.input_title || node.action_tips" :name="node.id" v-model="node.default" @keyup="on_keyup(parent_node, node, $event)" @blur="input_complete(parent_node, node, $event)" />
        </f7-list-item>
      </f7-list>

    </div>
  </div>
</template>


<script>
export default {
  name: 'input-widget',
  props: ['parent_node', 'node', 'input_style'],
  data() {
    return {
      nations: [
        '汉族',
        '蒙古族',
        '回族',
        '藏族',
        '维吾尔族',
        '苗族',
        '彝族',
        '壮族',
        '布依族',
        '朝鲜族',
        '满族',
        '侗族',
        '瑶族',
        '白族',
        '土家族',
        '哈尼族',
        '哈萨克族',
        '傣族',
        '黎族',
        '傈僳族',
        '佤族',
        '畲族',
        '高山族',
        '拉祜族',
        '水族',
        '东乡族',
        '纳西族',
        '景颇族',
        '柯尔克孜族',
        '土族',
        '达斡尔族',
        '仫佬族',
        '羌族',
        '布朗族',
        '撒拉族',
        '毛南族',
        '仡佬族',
        '锡伯族',
        '阿昌族',
        '普米族',
        '塔吉克族',
        '怒族',
        '乌孜别克族',
        '俄罗斯族',
        '鄂温克族',
        '德昂族',
        '保安族',
        '裕固族',
        '京族',
        '塔塔尔族',
        '独龙族',
        '鄂伦春族',
        '赫哲族',
        '门巴族',
        '珞巴族',
        '基诺族'
      ]
    }
  },
  methods: {
    update_value: function(node, child_node, val) {
      child_node.default = val
      this.$emit('update', 'event', node, child_node)
    },
    input_complete: function(node, child_node, event) {
      this.$emit('update', event, node, child_node)
    },
    on_keyup: function(node, child_node, event) {
      this.$emit('on_keyup', event, node, child_node)
    },

    add_item: function(node, event) {
      this.$emit('add_item', node, event)
      return false
    }
  }
}
</script>


<style lang="scss" scoped>
.input_text_only .input_text {
  height: 28px;
  padding: 10px;
}

.radio-input-show {
  .item-title {
    font-size: 14px;
  }
  ul:after {
    display: none;
  }
}

.bdt {
  border-top: 1px solid #ddd;
}
</style>
